<template>
    <view class="goods-add">
        <view class="tit-box" >
            <view class="add-g-title">{{
                actType == 1 || actType == 4
                    ? "新增卡项"
                    : actType == 3
                    ? "复制卡项"
                    : "编辑卡项"
            }}</view>
            <minMaxClose></minMaxClose>
        </view>

        <view class="info-box comm-list-scroll">
            <el-form ref="form" :model="fromData" :rules="cardRules" style="width: 900px;" label-width="80px" size="mini">
                <el-form-item label="类型">
                    <div class="class-tab-box">
                        <div class="class-tab-item" @click="tabClickFun(index,item)" :class="index == tabIndex? 'active':''" v-for="(item,index) in tabArr" :key="index">
                            <p>{{ item.name }}</p>
                            <p class="class-tab-tips">{{ item.desc }}</p>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="名称" prop="title">
                    <el-input v-model="fromData.title" placeholder="请输入卡项名称"></el-input>
                </el-form-item>
                <el-form-item label="售价" prop="price">
                    <el-input placeholder="请输入价格" v-model="fromData.price">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="颜色">
                    <el-color-picker v-model="fromData.color"></el-color-picker>
                </el-form-item>
                <el-form-item label="卡项内容">
                    <el-button size="small" @click="addGiveServiceTo">添加服务</el-button>
                    <div class="table-box" >
                        <el-table
                            border
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                            type="selection"
                            width="55">
                            </el-table-column>
                            <el-table-column label="服务名称" prop="title">
                            </el-table-column>
                            <el-table-column
                                prop="item_no"
                                label="次数">
                                <template slot-scope="scope">
                                    <div>
                                        <div v-if="tabIndex == 0 || tabIndex == 2">
                                            <el-input-number v-model="scope.row.times" controls-position="right" @change="handleChange" :precision="0" :min="1" ></el-input-number>
                                            <span class="unit">次</span>
                                        </div>
                                        <div v-else-if="tabIndex == 1">
                                            <span class="unit">不限次数</span>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="price"
                                width="100"
                                label="操作">
                                <template slot-scope="scope">
                                    <div class="icon-size">
                                        <i class="el-icon-delete" @click="deleteFun(scope.$index)"></i>
                                    </div>                                    
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>
                <el-form-item label="客户类型">
                    <el-select v-model="fromData.onsale_isold" placeholder="请选择">
                        <el-option
                        v-for="item in customArr"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="卡有效期">
                    <div>
                        <el-radio  @change="outdayType" v-model="fromData.radio" :label="1"> <span>永久有效期间</span></el-radio>
                    </div>
                    <div>
                        <el-radio @change="outdayType" v-model="fromData.radio" :label="2">
                            <span>购买后</span>
                            <el-input-number :disabled="fromData.radio == 1? true: false" style="margin: 0 10px;" size="mini" v-model="fromData.outday" controls-position="right"></el-input-number>
                            <span>天内有效</span>
                        </el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="上架">
                    <div>
                        <el-checkbox-group v-model="fromData.onsale_yds"  >
                            <el-checkbox v-for="(item, index) in onsaleYdsList" :key="index" :label="item.idyun"  >{{ item.name }}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item label="使用说明">
                    <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="请输入使用说明"
                        v-model="fromData.desc">
                    </el-input>
                </el-form-item>

            </el-form>
        </view>

        <view class="a-d-btn-box">
            <!-- <view class="c-btn">清除</view> -->
            <view class="f-btn" @click="onSaveGds">保存</view>
        </view>

        <giveServiceToDialog ref="giveServiceToDialog" @pushGiveServiceToData="gayGiveServiceToData"></giveServiceToDialog>
        <!-- 编辑图片 -->
        <!-- <imageCropper
            ref="imageCropper"
            :src="editUrl"
            :curEditType="curEditType"
            @confirm="confirm"
            @cancel="cancel"
        >
        </imageCropper> -->

        <!-- <popSkuBindImg
            ref="popSkuBindImg"
            @setSkuImg="setSkuImg"
        ></popSkuBindImg> -->
    </view>
</template>

<script>

import imageCropper from "../comm/ImageCropper.vue";
import popSkuBindImg from "../comm/PopSkuBindImg.vue";
import minMaxClose from "../min-max-close.vue";
import levelGroup from "../comm/LevelGroup.vue";
import eventCtrl from "../../js/event/EventCtrl.js";
import giveServiceToDialog from "./giveServiceToDialog.vue";
import goodsCtrl from "../../js/project/GoodsCtrl.js";
import config from "@/js/conf/Config.js";
import localStore from "@/js/LocalStore.js";

export default {
    props: ["actType", "imgData", "is_draft"],
    components: {
        imageCropper,
        popSkuBindImg,
        minMaxClose,
        giveServiceToDialog,
    },
    data() {
        return {
            fromData: {
                act: "add",
                type: 1,
                radio: 1,
                title: "",
                price: "",
                desc: "",
                onsale_isold: 0,
                onsale_yds: [],
                color: "#57b1f5",
                onsale_typeid: 0,
				
				cardInfo: null, // 获取的编辑数据
            },
            tabArr: [
                {
                    name: "次卡",
                    desc: "有限次数享受指定服务",
                    type: 1,
                },
                {
                    name: "时卡",
                    desc: "不限次数享受指定服务",
                    type: 2,
                },
                {
                    name: "通卡",
                    desc: "设定一个总次数，会员在次数内可选择消费卡内任意项目",
                    type: 3,
                },
            ],
            customArr: [
                {
                    name: "不限",
                    value: 0,
                },
                {
                    name: "老客户",
                    value: "1",
                },
                {
                    name: "新客户",
                    value: "2",
                },
            ],
            tabIndex: 0,
            tableData: [],
            onsaleYdsList: [],

            // 必天项
            cardRules:  {
                title: [
                    { required: true, message: '请输入卡项名称', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入价格', trigger: 'blur' },
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        };
    },

    methods: {
        onSaveGds () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.cardSaveAjax()
                } else {
                    return false;
                }
            });
        },
        handleSelectionChange (val) { // 表格多选
            console.log(val)
            let copyArr = JSON.parse(JSON.stringify(val));
            this.fromData.gd_ls = copyArr.map( item=> {
                return {
                    gdid:item.gdid,
                    times:item.times,
                }
            })
        },
        deleteFun (index) { // 删除某项服务
            this.$confirm('是否删除该服务?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableData.splice(index,1)
            }).catch(() => {});
        },
        async cardSaveAjax () {
            let url = config.YY_CARD_SAVE;
            let param = this.fromData;
            let res = await this.$api({url: url,data: param});
            if (res.status == 1) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
            }
        },

        gayGiveServiceToData (val) {
            this.tableData = val;
        },
        addGiveServiceTo () {
            this.$refs.giveServiceToDialog.dialogVisible = true;
        },
        outdayType (type) {

        },

        tabClickFun (index,row) {
            this.tabIndex = index;
            this.fromData.type = row.type;
        },
        
        initEdit() {
            this.sz = false;
            this.$refs.sellingProjectCost.initData();
            this.$refs.termOfValidity.initData();
            this.$refs.goodsMoreProjectDetail.initData("2", this.is_draft);
        },
        /****初始化新增数据****/
        async init() {
            this.onsaleYdsList = goodsCtrl.onsaleYds;
			let cp = await localStore.getCpInfo();
			let cardInfo = localStore.getCard();
			this.cardInfo = cardInfo;
			this.setFromData ();
        },
		
		setFromData () {
			Object.keys(this.fromData).forEach( item=> {
				if ( this.cardInfo[item]) {
					this.fromData[item] = this.cardInfo[item]
				}	
			})
			this.fromData.color = this.cardInfo.setting.color;
			this.tableData = this.cardInfo.gd_ls;
			this.cardInfo.outday
			if (Number(this.cardInfo.outday) > 0) {
				this.fromData.radio = 2;
			}
			console.log(this.fromData,'setDAta')
		}
    },

    mounted() {
    },
};
</script>
<style lang="scss" scoped>
::v-deep .spec-box {
    padding: 0;
}
.icon-size {
    font-size: 20px;
    .el-icon-delete {
        cursor: pointer;
    }
}
.unit {
    margin-left: 10px;
}
.table-box {
    margin-top: 10px;
}
.goods-add {
    flex: 1;
    margin-left: 345px;
    height: 100vh;
    background-color: #fff;
    // box-sizing: border-box;
    .tit-box {
        border-bottom: 1px #ececec solid;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 70px;
        .add-g-title {
            font-size: 18px;
            padding-left: 20px;
            color: #333;
        }
    }

    .class-tab-box {
        display: flex;
        .class-tab-item {
            width: 257px;
            height: 86px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: initial;
            margin-right: 10px;
            cursor: pointer;
            &:last-child {
                margin: 0;
            }
            &:hover {
                border-color: #3370ff;
                box-shadow: 0 3px 8px 0 rgba(0,0,0,.08);
            }
            p {
                width: 210px;
                text-align: center;
                font-size: 18px;
                margin-bottom: 6px;
                color: #535353;
            }
            .class-tab-tips {
                font-size: 12px;
                line-height: 17px;
                color: #898989;
            }
        }
        .active {
            border: 1px solid #3370ff;
        }
    }

    .info-box {
        height: calc(100vh - 152px);
        border-bottom: 1px #ececec solid;
        padding: 20px 20px 0;
        .info-base {
            margin-bottom: 20px;
        }
        .more-box {
            width: 100%;
            .s-l-grp {
                width: 100%;
            }
        }
        .sz-btn {
            line-height: 40px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 20px;
            margin-top: 20px;
            border: 1px #3388ff solid;
            color: #3388ff;
            text-align: center;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
        }
    }
    .a-d-btn-box {
        display: flex;
        height: 60px;
        width: 100%;
        bottom: 0;
        text-align: center;

        font-size: 16px;
        line-height: 60px;
        position: relative;
        .c-btn {
            color: #333;
            background-color: #fff;
            width: 100px;
            height: 100%;
            position: absolute;
            right: 200px;
        }
        .c-btn:hover {
            opacity: 0.9;
        }

        .f-btn {
            color: #fff;
            background-color: #3388ff;
            width: 200px;
            height: 60px;
            position: absolute;
            right: 0;
            cursor: pointer;
        }

        .f-btn:hover {
            opacity: 0.9;
        }
    }
}
</style>